<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../../set.jsp" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>用户消息中心</title>
<jsp:include page="../../cite.jsp" />
<script src="${_path}/lib/stickUp-0.5.7/stickUp.min.js"></script>
<style>
.body {
	padding-top: 40px;
}

.body .list-group {
	padding-top: 10px;
}

.body .panel {
	margin-top: 10px;
	margin-bottom: 10px;
}

.body tbody>tr>td {
	vertical-align: middle !important;
	word-break: break-all;
	word-wrap: break-word;
	font-size: 12px;
}

.body tbody>tr.active>td, .body tr.active>td>a, .body tr.active>td>a:hover {
	color: #777;
}
</style>
</head>
<body>
	<jsp:include page="../../header.jsp" />
	<div class="container body">
		<div class="row">
			<div class="col-md-3 hidden-sm hidden-xs">
				<div class="list-group" id="menu">
					<a href="./" class="list-group-item ${param.read == null ? 'active' : ''}"">全部</a>
					<a href="./?read=false" class="list-group-item ${param.read == false ? 'active' : ''}">
						未读
						<span class="badge" id="count">${_message == null ? 0 : _message}</span>
					</a>
					<a href="./?read=true" class="list-group-item ${param.read == true ? 'active' : ''}"">已读</a>
				</div>
			</div>
			<div class="col-md-8">
				<div class="panel panel-default">
					<div class="panel-heading">
						<c:choose>
							<c:when test="${param.read == false}">未读消息</c:when>
							<c:when test="${param.read == true}">已读消息</c:when>
							<c:otherwise>全部消息</c:otherwise>
						</c:choose>
					</div>
					<div class="panel-body"></div>
					<table class="table" id="table">
						<thead>
							<tr>
								<td width="10%">
									<strong>#</strong>
								</td>
								<td width="55%">
									<strong>标题</strong>
								</td>
								<td width="35%">
									<strong>接收时间</strong>
								</td>
							</tr>
						</thead>
						<tbody>
							<c:forEach varStatus="row_status" var="row" items="${messages.rows}">
								<tr class="${row.readTime == null ? '' : 'active'}">
									<td>
										<strong>${row_status.index + 1}</strong>
									</td>
									<td>
										<a class="row-detail" value="${row.id}" href="javasript:;">${row.title}</a>
										<div class="hide">${row.content}</div>
									</td>
									<td>${row.receiveTime}</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
				<div class="text-center">
					<jsp:include page="../../pager.jsp?${pageContext.request.queryString}">
						<jsp:param name="page" value="${messages.page.getPage()}" />
						<jsp:param name="size" value="${messages.page.getSize()}" />
						<jsp:param name="total" value="${messages.page.getTotal()}" />
					</jsp:include>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="modal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<a class="close" data-dismiss="modal" href="javascript:;">
						<i class="fa fa-close"></i>
					</a>
					<span id="detail_title"></span>
				</div>
				<div class="modal-body">
					<div class="panel panel-default">
						<div class="panel-body" id="detail_content"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		$(function() {
			$('#menu').stickUp();
			$('#table td>.row-detail').bind('click', function() {
				$('#detail_title').html($(this).text());
				$('#detail_content').html($(this).next().text());
				$('#modal').modal('show');
				var tr = $(this).parent().parent();
				if (!tr.hasClass('active'))
					$.ajax({
						url : './read/',
						type : 'post',
						dataType : 'json',
						data : {
							id : $(this).attr('value')
						},
						success : function(result) {
							if (result.succ == 0) {
								tr.addClass('active');
								if (count != null && count != 0) {
									$('#count').text(result.data);
									$('._user span.badge').text(result.data);
								}
							} else
								console.log(result.message);
						},
						error : function() {
							console.log('标记消息已读失败');
						}
					});
			});
		});
	</script>
</body>
</html>